<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        //1 数组解构赋值
        let arr = ['aaaa', 'bvvvv', 123]
        const [a, b, c] = arr
        console.log(a, b, c)

        //2 对象解构赋值
        const person = {
            name: 'zhangsan',
            age: 18
        }
        // const pName = person.name
        // const pAge = person.age
        // const { name: pName, age:pAge } = person
        let { name: pName, age, other } = person
        console.log(pName, age, other)

        //3 字符串扩展
        let str = 'hello world'
        console.log(str.startsWith('hello'))
        console.log(str.endsWith('world1'))
        console.log(str.includes('hello'))

        //4 字符串模板
        let strTemplete = `
        <div>
            <span> hekk </span>
            <span> ${str} </span>
        </div>
`
        console.log(strTemplete)

        //5 字符串中插入变量和表达式。变量名写在${}中。${}中可以写js表达式
        function saySomething() {
            return '字符串迭代的值'
        }
        //到这里的时候，编译器就已经将变量替换成字符串了。
        //所以后面的变量重新赋值没有生效
        let info = `我是${pName}，今年${age + 10}岁,正在说  ${saySomething()}`
        pName = 'mariozzz'
        console.log(info)
        console.log(pName)
    </script>
</body>

</html>